<template>
	<div ref="box" :style="{ height: porps.height, width: porps.width }"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, defineProps, watch } from 'vue';

// 接受自定义属性
const porps = defineProps<{
	// ts 类型
	options: echarts.EChartsCoreOption,
	width: string,
	height: string
}>()

const box = ref<HTMLElement | null>(null);

onMounted(() => {
	if (box.value !== null) {
		const s = echarts.init(box.value);
		s.setOption(porps.options)

		watch(porps.options, () => {
			s.setOption(porps.options)
		})
	}
})

</script>